<script setup lang="ts">
import { ref, computed } from 'vue'

const props = defineProps<{
  instrument: any,
}>()

const instrumentRef = computed(() => props.instrument)

const instrumentImg = computed(() => {
  return `/api/src/img/${props.instrument['imgName']}`
})

// 提取年月日
const formattedDate = computed(() => {
  return instrumentRef.value?.createAt?.split('T')[0] || ''
})

// 使用年份计算
const usedYears = computed(() => {
  const createDate = instrumentRef.value?.createAt
  if (!createDate) return 0
  const createYear = new Date(createDate).getFullYear()
  const currentYear = new Date().getFullYear()
  return currentYear - createYear
})

</script>

<template>
  <van-cell-group inset>
    <van-cell title="仪器名称">{{ instrumentRef.name }}</van-cell>
    <van-cell title="仪器照片" />
    <div style="display: flex; margin: 16px">
      <van-image
          width="150"
          height="150"
          :src="instrumentImg"
          style="flex: 1;"
      />
      <div style="flex: 1; padding-left: 8px;">
        <div>仪器序号：{{ instrumentRef.id }}</div>
        <div>仪器类型：{{ instrumentRef.subType?.name  }}</div>
        <div>录入时间：{{ formattedDate }}</div>
        <div>使用年份：{{ usedYears }} 年</div>
        <div>当前房间：{{ instrumentRef.room?.number}}</div>
      </div>
    </div>

  </van-cell-group>
</template>
